<template>
  <div>
    <div style="width: 750px; display: flex;">
      <div style="width: 150px; height: 40px; line-height: 40px; margin-top: 20px;">
        <el-avatar
          :src="avatar"
          style="margin-right: 10px; display:inline-block; vertical-align:middle;"
        ></el-avatar> {{ name[0] + '***' + name.substr(-1) }}
      </div>
      <div style="width: calc(100% - 150px); height: 100%; margin-top: 20px; display: flex; flex-direction: column;">
        <el-rate
          v-model="starValue"
          disabled
          text-color="#ff9900"
          size="large"
          style="--el-rate-icon-size: 30px"
        />
        <span style="text-align: left; font-weight: 400; margin-top: 10px;">{{ content }}</span>
        <span style="text-align: left; font-weight: 400; margin-top: 10px; color: #999999;">{{ date }}</span>
      </div>
    </div>
    <el-divider></el-divider>
  </div>
</template>

<script>
export default {
  props: {
    avatar: String,
    name: String,
    starLevel: Number,
    content: String,
    date: String,
  },
  data() {
    return {
      starValue: this.starLevel,
    };
  },
};
</script>